<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <style type="text/css">
        .item { display: flex; justify-content: space-between; margin: 10px auto; height: 30px; line-height: 30px ; }
        .item>.id { flex-basis: 10%; }
        .item>.name { flex-basis: 35%; }
        .item>.author { flex-basis: 10%; }
        .item>.price { flex-basis: 10%; }
        .item>.number { flex-basis: 10%; text-align: center ; }
        .item .number>span { display: inline-flex ; background: blue ; border: 1px solid blue ; min-width: 100px; max-width: 120px; }
        .item .number a { flex-basis: 30%; font-size: 20px; color: white; }
        .item .number input { flex-basis: 40%; width: 60%; border: none; outline: none ; background: white; text-align: center;}
        .item>.operation { flex-basis: 15%; text-align: center; }
        .total { display: flex; justify-content: flex-end; }
        .total>.total-price { flex-basis: 10%; }
        .total>.settle { flex-basis: 15% ; text-align: center; }
    </style>
</head>
<body>

    <h3>计算属性</h3>

    <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>{{ fullName }}</p>
        <p>{{ fullName }}</p>
        <hr>
        <div class="cart" v-if="items.length > 0">
            <div class="item" v-for="item in items" :key="item.id">
                <span class="id">{{ item.id }}</span>
                <span class="name">{{ item.name }}</span>
                <span class="author">{{ item.author }}</span>
                <span class="price">{{ item.price }}</span>
                <span class="number">
                    <span>
                        <a @click.prevent.stop="decrement(item.id)">-</a>
                        <input type="text" v-model="item.number">
                        <a @click.prevent.stop="increment(item.id)">+</a>
                    </span>
                </span>
                <span class="operation">
                    <a @click.prevent.stop="remove(item.id)">删除</a>
                </span>
            </div>
            <div class="total">
                <span class="total-price">{{ totalPrice }}</span>
                <span class="settle">结算</span>
            </div>
        </div>
    </div>

    <script src="vue.global.js"></script>
    
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    firstName: '' ,
                    lastName: '' ,
                    items: [
                        { id: 1234 , name: 'Vue从入门到放弃' , author: '小姜' , price: 98 , number: 2 } ,
                        { id: 4321 , name: 'Vue从没入门到放弃' , author: '佚名' , price: 88 , number: 3 },
                        { id: 5678 , name: 'Vue从入门到精通' , author: 'RespJone' , price: 108 ,number: 5 }
                    ]
                }
            },
            methods: {
                decrement(id){
                    let item = this.items.find( item => item.id == id );
                    if( item.number > 1 ) {
                        item.number-- ;
                    }
                },
                increment(id){
                    let item = this.items.find( item => item.id == id );
                    item.number++ ;
                },
                remove(id){
                    let index = this.items.findIndex( item => item.id == id );
                    if( index != -1 ){
                        this.items.splice( index , 1 );
                    } 
                }
            },
            computed: {
                fullName(){
                    return this.firstName + ' · ' + this.lastName ;
                },
                totalPrice(){
                    let initial = 0 ;
                    let reducer = (prev,curr)=>{
                        return prev + curr.price * curr.number ;
                    }
                    let total = this.items.reduce( reducer , initial );
                    // Number.prototype.toLocaleString( locale , options )
                    return total.toLocaleString( 'zh-CN' , { style: 'currency', currency: 'CNY' }) ;
                }
            }
        });
        app.mount('#root');
    </script>

</body>
</html>